<template>
  <Modal :mask-closable="false" v-model="deviceVisible" width="800" :title="$t('采购备件信息')" class="modal-content-layout">
    <Form ref="formTop" :model="formTop" label-position="top" :rules="validateDevice">
      <Row :gutter="16">
        <Col :span="12">
        <FormItem :label="$t('备件料号')" prop="materielNo">
          <Select v-model="formTop.materielNo" filterable clearable :placeholder="$t('common.inputInfo')"
            :remote-method="handleRemote" :loading="searchLoading" @on-select="handleChange">
            <Option v-for="(item, i) in numberList" :value="item.materielNo" :label="item.desc" :tag="item" :key="i">
            </Option>
          </Select>
        </FormItem>
        </Col>
        <Col :span="12">
        <FormItem :label="$t('规格型号')">
          <Input v-model="formTop.specification" disabled :placeholder="$t('common.inputInfo')" clearable />
        </FormItem>
        </Col>
        <Col :span="12">
        <FormItem :label="$t('品名')">
          <Input v-model="formTop.goodsName" disabled :placeholder="$t('common.inputInfo')" clearable />
        </FormItem>
        </Col>
        <Col :span="12">
        <FormItem :label="$t('所需数量')" prop="amountOfNeed">
          <Input v-model="formTop.amountOfNeed" :placeholder="$t('common.inputInfo')" clearable
            @input="amountOfNeedInput" />
        </FormItem>
        </Col>
        <Col :span="12">
        <FormItem :label="$t('采购数量')">
          <Input v-model="formTop.amountOfPurchase" :placeholder="$t('common.inputInfo')" clearable />
        </FormItem>
        </Col>
        <Col :span="12">
        <FormItem :label="$t('库存数量')">
          <Input disabled :placeholder="$t('common.inputInfo')" v-model="formTop.amountOfStorage" clearable />
        </FormItem>
        </Col>
        <Col :span="24">
        <FormItem :label="$t('备注')">
          <Input :placeholder="$t('common.inputInfo')" v-model="formTop.comment" type="textarea" clearable />
        </FormItem>
        </Col>
      </Row>
    </Form>
    <div slot="footer">
      <Button type="default" @click="handleCancel">{{ $t('common.Cancle') }}</Button>
      <Button type="primary" :loading="loadingVisible" @click="handleOk">{{ $t('确认') }}</Button>
    </div>
  </Modal>
</template>

<script>

export default {
  name: "addModal",
  props: ['list'],
  data() {
    return {
      numberList: [],
      deviceVisible: false,
      loadingVisible: false,
      searchLoading: false,
      formTop: {},
      validateDevice: {
        materielNo: [
          { required: true, message: this.$t('common.inputInfo'), trigger: "change" },
        ],
        amountOfNeed: [
          { required: true, message: this.$t('common.inputInfo'), trigger: "blur" },
        ],
      },
    }
  },
  mounted() {

  },
  methods: {
    handleChange(obj) {
      const { goodsName, specification, storageCount } = obj.tag;

      this.formTop = Object.assign(this.formTop, { specification, goodsName, amountOfStorage: storageCount, amountOfPurchase: Math.abs((storageCount || 0) - (this.formTop.amountOfNeed || 0)) })
    },
    amountOfNeedInput(val) {
      if (!isNaN(val)) {
        this.formTop.amountOfPurchase = Math.abs((this.formTop.amountOfStorage || 0) - (this.formTop.amountOfNeed || 0))
      }
    },
    async show() {
      this.numberList = []
      this.deviceVisible = true;
      this.$refs.formTop.resetFields();
      this.formTop = {}
    },
    handleRemote(query) {
      if (query !== "") {
        this.searchLoading = true;
        let _query = query.split('-')
        if (Array.isArray(_query)) _query = _query[0]
        return this.axios({
          method: "get",
          url: "/dms/backup/scrapApply/getMaterielInfo",
          params: {
            param: _query,
          },
        }).then((res) => {
          if (res.code === 200) {
            let list = res.data.map(item => {
              item.desc = item.goodsName + '-' + item.materielNo
              return item;
            })
            this.numberList = list.filter(item => {
              if (!this.list.find(m => m.materielNo === item.materielNo)) {
                return item;
              }
            })
          } else {
            this.$Message.warning({
              content: res.msg,
              duration: 6,
              closable: true,
            });
          }
        })
          .finally(() => {
            this.searchLoading = false;
          });
      } else {
        this.numberList = [];
      }
    },
    handleCancel() {
      this.deviceVisible = false;
      this.loadingVisible = false;
    },
    handleOk() {
      this.$refs.formTop.validate((valid) => {
        if (valid) {
          this.$emit('change', JSON.parse(JSON.stringify(this.formTop)))
          this.handleCancel()
        }
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.demo-upload-list {
  position: relative;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  margin-left: 15px;

  img {
    width: 100%;
    height: 100%;
  }

  .delIcon {
    position: absolute;
    right: -10px;
    top: -10px;
    color: red;
    font-size: 20px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
  }
}
</style>
